<template>
  <div class="home">
    <div class="header">
      <div class="header-title">前端开发文档</div>
    </div>
    <div class="body">
      <div class="main">
        <img src="~@/assets/img/njwq.png" alt="">
        <h1>前端开发文档</h1>
        <el-button type="primary" size="large" @click="toDocs">快速上手→</el-button>
        <div class="features">
          <div class="feature">
            <h2>简洁至上</h2>
            <p>标记鲜明，模块化，代码清晰，易于维护，迭代更新</p>
          </div>
          <div class="feature">
            <h2>提高效率</h2>
            <p>减少传递，沟通成本，复用性高，减少重复造轮子，拿来即用</p>
          </div>
          <div class="feature">
            <h2>Vue驱动</h2>
            <p>享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件。</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderNav from './header-nav.vue' 
import { mapActions } from 'vuex'
import { ACCESS_TOKEN } from '@/store/mutation-types'

export default {
  name: 'Home',
  components: {
    HeaderNav
  },
  mounted() {
    // if(!this.$ls.get(ACCESS_TOKEN)){
    //   this.autoLogin()
    // }
  },
  methods: {
    ...mapActions(['Login']),
    toDocs() {
      this.$router.push({
        name: "Installation"
      })
    },
    autoLogin() {
      this.Login().then(res => {
        console.log('login', res)
      })
    },
  }
}
</script>

<style scoped lang="scss">
  .home {

    .header {
      width: 100%;
      height: 60px;
      padding: 11px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: solid 1px #eaecef;

      &-title {
        color: #000;
        font-size: 20px;
        font-weight: bold;
        cursor: pointer;
      }
    }

    .body {
      width: 100%;
      height: calc(100vh - 60px);
      display: flex;
      justify-content: center;

      .main {
        width: 960px;
        height: 100%;
        min-height: 680px;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 100px;

        img {
          width: 520px;
          height: 280px;
        }

        h1 {
          font-weight: bold;
          font-size: 48px;
        }

        .features {
          width: 100%;
          height: 160px;
          margin-top: 50px;
          border-top: solid 1px #eaecef;
          border-bottom: solid 1px #eaecef;
          padding: 20px 0;
          display: flex;
          justify-content: space-between;

          .feature {
            width: 30%;

            h2 {
              font-size: 20px;
              font-weight: 600;
              font-family: '苹方';
            }
          }
        }
      }
    }

  }
</style>
